<template>
  <div class="box">
    <div class="header">
      <div class="db">
        企业名称：
        <a-input
          placeholder="请输入企业名称"
          style="width: 220px; border-radius: 5px"
          v-model:value="form.name"
        />
        <a-button type="primary" style="margin-left: 15px; border-radius: 5px" @click="searchBtn"
          >查询</a-button
        >
        <a-divider />
      </div>
      <div class="nr">
        <div>
          <a-button type="primary" style="border-radius: 5px" @click="tz">添加企业</a-button>
        </div>
        <a-table
          :dataSource="list"
          :columns="columns"
          style="margin-top: 10px"
          :pagination="false"
          @expand="handleExpand"
          :expandedRowKeys="expandedRowKeys"
          :row-key="(record) => record.id"
        >
          <!-- 外层 -->
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.dataIndex === 'number'">
              {{ (form.page - 1) * form.pageSize + index + 1 }}
            </template>
            <a-space v-if="column.dataIndex === 'operate'">
              <a-button
                type="link"
                style="padding-left: 0px; padding-right: 5px"
                @click="visible = true"
                >添加合同</a-button
              >
              <a-button
                type="link"
                style="padding-left: 0px; padding-right: 5px"
                @click="ck(record.id)"
                >查看</a-button
              >
              <a-button type="link" style="padding-left: 0px; padding-right: 5px" @click="bj"
                >编辑</a-button
              >
              <a-button
                type="link"
                style="padding-left: 0px; padding-right: 5px"
                @click="delRole(record.id)"
                :disabled="record.existContractFlag === 1"
                >删除</a-button
              >
            </a-space>
          </template>
          <!-- 内层 -->
          <template #expandedRowRender>
            <a-table :columns="columns2" :data-source="list2" :pagination="false" size="small">
              <template #bodyCell="{ column, record }">
                <!-- 起止时间 -->
                <a-space v-if="column.dataIndex === 'namea'">
                  {{ record.startTime }}至{{ record.endTime }}
                </a-space>
                <!-- 合同状态 -->
                <a-space v-if="column.dataIndex === 'contact'">
                  <a-tag color="blue" v-if="record.status === 0">待生效</a-tag>
                  <a-tag color="green" v-else-if="record.status === 1">生效中</a-tag>
                  <a-tag v-else-if="record.status === 3">已退租</a-tag>
                  <a-tag red="red" v-else>已到期</a-tag>
                </a-space>
                <!-- 按钮 -->
                <a-space v-if="column.dataIndex === 'operate'">
                  <a-button
                    type="link"
                    style="padding-left: 0px; padding-right: 5px"
                    :disabled="record.renewFlag === 0"
                    @click="visible = true"
                    >续租</a-button
                  >
                  <a-button
                    type="link"
                    style="padding-left: 0px; padding-right: 5px"
                    :disabled="record.exitFlag === 0"
                    @click="tzz(record.id)"
                    >退租</a-button
                  >
                  <a-button
                    type="link"
                    style="padding-left: 0px; padding-right: 5px"
                    @click="delRole1(record.id)"
                    :disabled="record.existContractFlag === 1"
                    >删除</a-button
                  >
                </a-space>
              </template>
            </a-table>
          </template>
        </a-table>

        <div style="margin-left: 450px; margin-top: 20px">
          <a-config-provider :locale="zh_CN">
            <a-pagination
              size="small"
              :total="total"
              show-size-changer
              show-quick-jumper
              v-model:current="form.page"
              v-model:page-size="form.pageSize"
              :show-total="(total) => `共${total}条`"
              :pageSizeOptions="['10', '20', '30,', '40']"
              @change="onChange"
            />
          </a-config-provider>
        </div>
      </div>
    </div>
  </div>
  <add-contract v-model:visible="visible"></add-contract>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getRoleList, delRoleList, getPark, getParklist, getRolelists, dellist } from '@/api/enterprise'
import { Modal, message } from 'ant-design-vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { useRouter } from 'vue-router'
import { setId } from '@/utils/auth'
import AddContract from './components/add-contract.vue'
let router = useRouter()
const list = ref([])
const list2 = ref([]) //展开列表
const expandedRowKeys = ref([])
const total = ref(null)
const visible = ref(false)
const form = ref({
  page: '1',
  pageSize: '10'
})
// 外层表格
const columns = [
  { title: '序号', width: 130, dataIndex: 'number' },
  { title: '企业名称', dataIndex: 'name', key: 'name', width: 330 },
  { title: '联系人', dataIndex: 'contact', key: 'contact', width: 250 },
  { title: '联系电话', dataIndex: 'contactNumber', key: 'contactNumber', width: 250 },
  { title: '操作', dataIndex: 'operate', width: 300 }
]
// 内层表格
const columns2 = [
  { title: '租赁楼宇', width: 330, dataIndex: 'buildingName', key: 'buildingName' },
  { title: '租赁起止时间', dataIndex: 'namea', key: 'namea', width: 330 },
  { title: '合同状态', dataIndex: 'contact', key: 'contact', width: 250 },
  { title: '操作', dataIndex: 'operate', width: 300 }
]
// 处理展开
const handleExpand = (expanded, record) => {
  console.log(expanded)
  console.log(record.id)
  if (expandedRowKeys.value.length > 0) {
    let index = expandedRowKeys.value.indexOf(record.id)
    if (index > -1) {
      expandedRowKeys.value.splice(index, 1)
    } else {
      getParklistAPI(record.id)
      expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
      expandedRowKeys.value.push(record.id)
    }
  } else {
    getParklistAPI(record.id)
    expandedRowKeys.value.push(record.id)
  }
}
// 点击跳转添加页面
const tz = () => {
  router.push('/addenterprise')
}
// 点击跳转编辑页面
const bj = () => {
  router.push('/bjenterprise')
}
// 点击查看企业
const ck = async (id) => {
  const res = await getPark(id)
  console.log(res)
  setId(res.data)
  router.push({
    path: '/ckenterprise',
    query: {
      id: res.data.id
    }
  })
}
// 获取内层数据
const getParklistAPI = async (id) => {
  console.log(id)
  const { data } = await getParklist(id)
  list2.value = data
  console.log(data)
}
// 渲染列表功能
const getRoleListAPI = async (form) => {
  const { data } = await getRoleList(form)
  list.value = data.rows
  console.log(data.rows)
  total.value = data.total
}
// 点击分页功能
const onChange = (page, pageSize) => {
  form.value.page = page
  form.value.pageSize = pageSize
  getRoleListAPI(form.value)
}
// 搜索功能
const searchBtn = () => {
  getRoleListAPI(form.value)
}
// 删除功能
const delRole = (id) => {
  Modal.confirm({
    title: '是否确认删除当前企业?',
    async onOk() {
      await delRoleList(id)
      message.success('删除成功')
      getRoleListAPI()
    }
  })
}
// 删除当前合同
const delRole1 = (id) => {
  Modal.confirm({
    title: '是否确认删除当前合同?',
    async onOk() {
      await getRolelists(id)
      message.success('删除成功')
      getParklistAPI()
    }
  })
}
// 退租功能
const tzz = (id) => {
  console.log(id);
  Modal.confirm({
    title:'退租不可撤回，是否确认退租当前楼宇?',
    async onOk() {
      await dellist(id.toString())
      message.success('操作成功')
      getParklistAPI()
    }
  })
}
onMounted(() => {
  getRoleListAPI(form.value)
  getParklistAPI()
})
</script>
<style scoped lang="scss">
.box {
  width: 1450px;
  height: 100%;
  background-color: #fff;
  margin-top: 20px;
  margin-left: 20px;
  padding-top: 20px;
  padding-left: 20px;
  .header {
    display: block;
    width: 100%;
    // height: 100vh;
    background-color: #fff;
    .db {
      width: 100%;
      background-color: #fff;
    }
    .nr {
      display: block;
      width: 100%;
      //   height: 100vh;
      background-color: #fff;
      margin-top: 25px;
    }
  }
  .ant-table-cell {
    padding: 8px, 8px;
  }
}
</style>
